<!-- 添加手机号 -->
<template>
  <a-modal
    v-model:visible="showModal"
    @close="onClose"
    @before-ok="onConfirm"
    :title="pageTlt"
    :mask-closable="false"
    class="modal-dialog-wrapper"
    unmount-on-close
    width="45vw"
  >
    <page-form :model="form" layout="vertical" style="width: 100%; height: 200px" :rules="rules" ref="formRef">
      <page-form-item style="margin: 0" field="linkman" label="联系人姓名" required size="1/2">
        <a-input placeholder="请输入" allow-clear v-model="form.linkman" max-length="20" />
      </page-form-item>
      <page-form-item style="margin: 0" field="memberPhone" label="手机号" required size="1/2">
        <a-input placeholder="请输入" allow-clear v-model="form.memberPhone" max-length="11" />
      </page-form-item>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onConfirm">{{ onConfirmText }}</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup name="AddLeasePhone">
  import { ref } from 'vue'
  import { isMobile } from '@/utils/validate.js'

  const form = ref({
    memberPhone: '',
    linkman: '',
  })

  const validatorPhone = (value, callback) => {
    if (!isMobile(value) || value.length != 11) {
      callback('手机号格式不正确')
    } else {
      // callback('MIMA');
    }
    // if (value.length == 11 || isMobile(value)) {
    //   // callback('MIMA');
    // } else {
    //   callback('手机号格式不正确')
    // }
  }
  const rules = {
    memberPhone: [
      { required: true, message: '请填写手机号' },
      { validator: validatorPhone, trigger: 'change' },
    ],
    linkman: [{ required: true, message: '请填写联系人姓名' }],
  }
  const record = ref(null)
  const type = ref(null)
  const onConfirmText = ref('')
  const showModal = ref(false)
  const pageTlt = ref('完善信息') //标题

  const show = (rec, pagetype, clientData) => {
    console.log(clientData)
    // console.log(pagetype)
    type.value = pagetype //a发起签署 b发起作废
    showModal.value = true
    record.value = rec
    form.value.memberPhone = clientData.mobile
    form.value.linkman = clientData.linkman
    if (type.value == 'a') {
      onConfirmText.value = '发起签署'
      pageTlt.value = '请先完善企业联系人信息，再发起签署'
    }
    if (type.value == 'b') {
      onConfirmText.value = '发起作废'
      pageTlt.value = '请先完善企业联系人信息，再发起作废'
    }
    if (type.value == 'c') {
      onConfirmText.value = '确认生成'
      pageTlt.value = '请先完善企业联系人信息，再生成电子合同'
    }
  }

  const onClose = () => {
    showModal.value = false
    form.value = {}
  }

  const emit = defineEmits(['ok'])

  const formRef = ref()
  const validateFn = () => {
    return new Promise((resolve, reject) => {
      formRef.value.validate((error) => {
        if (error) {
          console.log(error)
          reject()
        } else {
          resolve()
        }
      })
    })
  }

  const onConfirm = () => {
    return new Promise((resolve, reject) => {
      validateFn()
        .then(() => {
          var recordData = {
            phone: form.value.memberPhone,
            linkman: form.value.linkman,
            record: record.value,
            type: type.value,
          }
          // console.log('recordData', recordData)
          showModal.value = false
          emit('ok', recordData)
        })
        .catch(() => {
          reject()
        })
    })
  }

  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  :deep(.arco-row) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  :deep(.arco-row-align-start) {
    padding: 0 !important;
  }
  :deep(.arco-col) {
    padding: 0 10px !important;
  }
</style>
